<template>
	<view class="Registered mt-4">
		<LeftRight :data="registeredList" class="mx-3">
			<template #bottom="{item}">
				<view class="buttom-box">
					<view class="buttom mt-4 flex justify-between pl-1 pr-1 pb-1 font-sm align-center">
						<view>个人所得积分</view>
						<view class="red flex align-center">
							<image style="width: 32rpx;height:32rpx;" src="../../static/icon/score.png" mode="aspectFill"></image>
							<span class="ml-1">{{item.obtainedPoints || 0}}</span>
							<!-- obtainedPoints //积分 -->
						</view>

					</view>
					<view class="buttom flex justify-between mt-2 pl-1 pr-1 pb-1 font-sm align-center">
						<view>个人星级评价</view>
						<view class="flex justify-center align-center">
							<uni-rate v-if="item.status != '1'" v-model="item.starRate" readonly="true" size="16" max="3" />
							<view v-if="item.status != '1'" class="ml-1" style="color: #ffca3e;">
								{{item.starRate == '0' ? '不合格':item.starRate == '1'? '合格' : item.starRate == '2'? '良好':'优秀'}}
							</view>
							<view v-else class="ml-1" style="color: rgb(255, 153, 0)">
								待评价
							</view>
						</view>
					</view>

					<view class="buttom flex justify-between mt-2 pl-1 pr-1 pb-1 font-sm align-center">
						<view>个人活动状态</view>
						<view class="flex justify-center align-center">
							<view class="ml-1" :style="getStatusStyle(item.status)">
								{{item.status == '1' ? '待签到' : item.status == '2'
								? '请假审核中' : item.status == '3'
								? '请假' : item.status == '4'
								? '已签到' : item.status == '5'
								? '报名未签到' : item.status == '6'
								? '已完成' : item.status == '7'
								? '请假已驳回' :'已评价'}}

							</view>
						</view>
					</view>
				</view>

			</template>
		</LeftRight>
	</view>
</template>

<script setup>
	import LeftRight from "../../component/commonLayout/LeftRight.vue";
	import uniReq from '../../api/index.js'
	import {
		ref,
		onMounted
	} from 'vue'
	const value = ref(2)
	const registeredList = ref([])
	
	 const getStatusStyle=(status)=> {
	      switch (status) {
	        case '1':
	          return 'color: #ff9900;';
	        case '2':
	          return 'color: #00aaff;';
	        case '3':
	          return 'color: #ff6666;';
	        case '4':
	          return 'color: #33cc33;';
	        case '5':
	          return 'color: #cccccc;';
	        case '6':
	          return 'color: #008000;';
	        case '7':
	          return 'color: #ff0000;';
	        default:
	          return '';
	      }
	    }



	const gitRegisteredList = () => {
		uniReq({
			url: '/api/volunteer/activity/SelectActivityByUser',
			method: 'GET',
			data: {
				status: '1,2,3,4,5,6,7,8',

			}
		}, e => {
			if (e.success) {
				console.log('e-------------', e.data.records)
				registeredList.value = e.data.records
				registeredList.value.forEach((item) => {
					item.responsibleimg = JSON.parse(item.responsibleimg)
					console.log('item.responsibleimg-------------', item.responsibleimg)
				})

			} else {
				uni.showToast({
					title: '获取请假列表信息失败',
					icon: 'none'
				})
			}
		})
	}
	onMounted(() => {
		gitRegisteredList()
	})
</script>

<style lang="scss" scoped>

</style>